
<script setup>
    // import { ref } from 'vue';
</script>
<template>
    <div class="found-box">
        <!-- 头部 -->
        <div class=" header-container">
            <van-row justify="space-around">
                <van-col span="6" class="icon-fist">
                    <van-icon name="qr " />
                </van-col>
                <van-col span="12" class="icon-fist2 ;
">
                </van-col>
                <van-col span="6" class="icon-fist3">
                    <van-icon name="comment-o" @click="$router.push('/foundIcon') " />
                </van-col>
            </van-row>

            <!-- 内容 -->
        </div>
        <div class="main">
            <div class="main-container">
                <van-circle v-model:current-rate="currentRate" :rate="rate" color="#fff " :stroke-width="60"
                    layer-color="#cccc" text="未连接设备" size="200" />
                <div class="icon">
                    <van-button round icon="arrow-left" color="#58bc58">
                        默认
                    </van-button>
                </div>

                <div class="main-icon">

                </div>


            </div>

        </div>
        <div class="circle">

        </div>
        <!--footer  -->
        <div class="footer">

        </div>
    </div>

</template>

<script>
export default {
    nsetup() {
        const currentRate = ref(0);
        const text = computed(() => currentRate.value.toFixed(0) + '%');

        return {
            text,
            currentRate,

        };
    },

};
</script>
<style>
.found-box {
    background-color: rgba(36, 143, 48, 0.82);
    height: 100vh;
}

.header-container {
    height: 20vh;
}

.icon-fist {
    color: aliceblue;
    font-size: 40px;
    padding: 40px 0 0 0;
}

.icon-fist2 {
    padding: 40px;

}

.icon-fist3 {
    color: aliceblue;
    font-size: 40px;
    padding: 40px 0 0 0;
    text-align: right;
}

/* main */
.main {
    width: auto;
    height: 40vh;
}

.main-container {
    text-align: center;

}

.icon {
    padding: 3vh;

}
</style>